<template>
	<view class="container">
		<view class="box">
			<view class="title-box">
				<view class="title">2025年11月考勤</view>
				<image class="calendar" @click="chooseDate" src="/static/icon/sj (2).png" />
			</view>
			<view class="list-box">
				<view class="list-title">
					<view class="day"></view>
					<view class="work">上班</view>
					<view class="work">下班</view>
				</view>
				<view class="list-item">
					<view class="day">1日</view>

					<view class="work">
						2025-2-2
					</view>
					<view class="work">
						缺卡
					</view>
				</view>
			</view>
		</view>
		<!-- popup弹出 -->
		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="year-month" @confirm="confirm">
		</uv-datetime-picker>
		<uv-tabbar :value="value" @change="index=>value = index">
			<uv-tabbar-item @click="click('/pages/staff/attendance/attendance')" text="考勤">
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/staff_index/attendance/punchin--active.png"></image>
				</template>
				<template v-slot:active-icon>
					<image class="icon" src="/static/staff_index/attendance/punchin.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item @click="click('/pages/staff/attendance/attendance-application/attendance-application')"
				text="申请">
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/staff_index/attendance/application--active.png"></image>
				</template>
				<template v-slot:active-icon>
					<image class="icon" src="/static/staff_index/attendance/application.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item @click="click('/pages/staff/attendance/attendance-statistics/attendance-statistics')"
				text="统计">
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/staff_index/attendance/statistics--active.png"></image>
				</template>
				<template v-slot:active-icon>
					<image class="icon" src="/static/staff_index/attendance/statistics.png"></image>
				</template>
			</uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: Number(new Date()),
				value: 2,
				year: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				
				currentDate: new Date().getTime(),
				maxDate: new Date().getTime(),
				minDate: new Date('2020/08/01').getTime(),
				attendanceList: [],
				title: '2020年11月考勤统计'
			};
		},
		options: {
			styleIsolation: 'apply-shared'
		},
		mounted() {
			// 处理小程序 attached 生命周期
			this.attached();
		},
		destroyed() {
			// 在组件实例被从页面节点树移除时执行
		},
		props: {},
		methods: {

			//底部导航跳转
			click(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			attached() {
				uni.setNavigationBarTitle({
					title: '考勤统计'
				});
				this.getPunchInRecord();
			},

			// 显示日历picker
			chooseDate() {
				console.log(1)
				
				this.$refs.datetimePicker.open();
			},
		},
		created: function() {}
	};
</script>
<style>
	.icon {
		width: 36rpx;
		height: 36rpx;
	}

	.box {
		margin: 27rpx auto;
		padding-bottom: 102rpx;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 1rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.14);
		width: 670rpx;
	}

	.box .title-box {
		position: relative;
	}

	.box .title-box .title {
		line-height: 107rpx;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
	}

	.box .title-box .calendar {
		position: absolute;
		top: 28rpx;
		right: 43rpx;
		width: 43rpx;
		height: 42rpx;
	}

	.box .list-box {
		padding: 0 35rpx;
	}

	.box .list-box .list-title {
		display: flex;
		width: 600rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 24rpx;
		color: #000000;
		background-color: #fafafa;
	}

	.box .list-box .list-title .day {
		width: 76rpx;
	}

	.box .list-box .list-title .work {
		width: 262rpx;
	}

	.box .list-box .list-title .red {
		color: #ff0000;
	}

	.box .list-box .list-item {
		display: flex;
		line-height: 70rpx;
		text-align: center;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 24rpx;
		color: #000000;
	}

	.box .list-box .list-item .day {
		width: 76rpx;
	}

	.box .list-box .list-item .work {
		width: 262rpx;
		color: #666666;
	}
</style>